<template>
<div>
  <van-nav-bar title="协会详情" left-span="返回" left-arrow @click-left="onClickLeft" fixed />
  <div class="details1">
    <div class="details1-title">王者荣耀</div>
    <div class="details1-item">
      <div class="details1-name">法人</div>
      <div class="details1-desc">李白</div>
    </div>
    <div class="details1-item">
      <div class="details1-name">办公地址</div>
      <div class="details1-desc">广东省广州市番禺区南浦区桔树村48号</div>
    </div>
    <div class="details1-item">
      <div class="details1-name">联系人</div>
      <div class="details1-desc">李白</div>
    </div>
    <div class="details1-item">
      <div class="details1-name">联系电话</div>
      <div class="details1-desc">1304587548</div>
    </div>
    <div class="details1-item">
      <div class="details1-name">邮箱</div>
      <div class="details1-desc">1844009337@qq.com</div>
    </div>
  </div>
  <van-tabs v-model="active" color="#07c160" line-width="30px" line-heigh="4px">
    <van-tab title="协会成员">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item">
          <div class="item-content">
            <div>
              <img class="item-imgs" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
            <div class="item-infos">张三</div>
            <div>
              <div class="item-time">入会时间：2021-02-24</div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-tab>
    <van-tab title="协会产品">
      <div class="content">
        <div class="content-item">
          <img class="item-img" src="@/assets/img/蔬菜.png">
          <span class="item-name">大冬瓜</span>
        </div>
        <div class="content-item">
          <img class="item-img" src="@/assets/img/蔬菜.png">
          <span class="item-name">大冬瓜</span>
        </div>
        <div class="content-item">
          <img class="item-img" src="@/assets/img/蔬菜.png">
          <span class="item-name">大冬瓜</span>
        </div>
      </div>
      <div style="margin:30px;">
        <van-button round block plain type="primary" native-type="submit">申请添加</van-button>
      </div>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
export default {
  name: 'myDetail',
  data() {
    return {
      active: 2,
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'myAssociation'
      })
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 3; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 5) {
          this.finished = true;
        }
      }, 1000);
    },
  },
}
</script>

<style scoped>
.details1 {
  margin-top: 46px;
  padding: 10px;
  background-image: url(../../assets/img/BG@2x.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 100%;
}

.details1-title {
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #313234;
  line-height: 30px;
  margin-top: 8px;
}

.details1-item {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  padding-bottom: 8px;
}

.details1-name {
  width: 100px;
  font-size: 13px;
  line-height: 20px;
  color: #6A6F7A;
}

.details1-desc {
  font-size: 14px;
  line-height: 20px;
  color: #000000;
}

.content {
  width: 300px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.content-item {
  display: flex;
  flex-direction: column;
  width: 128px;
  height: 128px;
  background: #FFFFFF;
  box-shadow: 0px 3px 14px rgba(78, 112, 184, 0.07);
  border-radius: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

.item-img {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
}

.item-name {
  font-size: 14px;
  font-weight: bold;
  color: #2C2E34;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
}

.item-infos {
  flex: 1;
  font-size: 14px;
  line-height: 20px;
  color: #2C2E34;
  opacity: 1;
}

.item-imgs {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50px;
}

.icon-images {
  width: 12px;
  height: 12px;
}

.item-time {
  height: 12px;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: #6A6F7A;
}
</style>
